<template>
  <div class="box">
    <div class="user">
      <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      ></el-avatar>
      <span>{{ this.user.callName }} <br>
            <span class="introduce">
              个人简介:{{this.user.introduce}}
            </span>
       </span>
    </div>
    <div class="nav">
      <el-menu
        background-color="rgba(0,0,0,.2)"
        text-color="#C1C3C7"
        default-active="2"
        active-text-color="#ffff"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-edit"></i>
            <span>创作中心</span>
          </template>
          <el-menu-item-group>
            <template slot="title">待开发</template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="发布">
            <el-menu-item index="1-3" @click="toWrite">开始创作</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">备忘录</template>
            <el-menu-item index="1-4-1" @click="toNotes">事务</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="2" @click="to">
          <i class="el-icon-menu"></i>
          <span slot="title">推荐</span>
        </el-menu-item>
        <el-menu-item index="3" @click="toMyArtical">
          <i class="el-icon-document"></i>
          <span slot="title">我的文章</span>
        </el-menu-item>
        <el-menu-item index="4" @click="toSetting">
          <i class="el-icon-setting"></i>
          <span slot="title">我的信息</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user:{
        callName:'',
        introduce:''
      }
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    to() {
      this.$router.push("/home/artical");
    },
    toNotes() {
      this.$router.push("/home/notes");
    },
    toWrite() {
      this.$router.push("/home/write");
    },
    toSetting() {
      this.$router.push("/home/setting");
    },
    toMyArtical() {
      this.$router.push("/home/myArtical");
    },
  },
  mounted() {
    this.$request({
      url:'/home',
      method:'get',
    }).then(success=>{
     this.user=success.data
    })
  },
};
</script>

<style scoped>
.box {
  margin-top: 100px;
  position: fixed;
  width: 200px;
  height: 700px;
}
.user {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 5px 0;
  height: 100px;
  font-size: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
}
.introduce{
  display: inline-block;
  max-width: 120px;
  font-size: 16px;
  color: #ccc;
  overflow: hidden;
}
.nav {
  height: 590px;
  background-color: rgba(0, 0, 0, 0.5);
}
.el-menu-item:hover {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.el-submenu /deep/ .el-submenu__title:hover {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
</style>